package com.example.therDays.ui.components


import android.graphics.drawable.Icon
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.indication
import androidx.compose.foundation.interaction.InteractionSource
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.LocationOn
import androidx.compose.material.icons.filled.Search
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.DpOffset
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.lifecycle.viewmodel.compose.viewModel
import com.example.therDays.ui.vModel.TopBarModel
import com.google.accompanist.insets.LocalWindowInsets

@Composable
fun TopBar(vm : TopBarModel = viewModel()) {
    //获取顶部显示栏的高度数值
    val topInsetr = LocalWindowInsets.current.statusBars.top
    //转换成为
    val stateBarDp = with(LocalDensity.current){
        topInsetr.toDp()
    }

    Surface(
        modifier = Modifier
            .height(stateBarDp + 36.dp)
            .fillMaxWidth()
            .padding(top = stateBarDp),
//        color = Color.Blue
    ) {
        Row(modifier = Modifier
            .fillMaxSize()
            .height(75.dp),
            verticalAlignment = Alignment.Bottom,
            horizontalArrangement = Arrangement.SpaceBetween

        ) {
            Row(modifier = Modifier
                .fillMaxHeight()
                .clickable(indication = null, interactionSource = remember {
                    MutableInteractionSource()
                }) {
                    vm.expanded.value = !vm.expanded.value
                }
                .padding(start = 14.dp),
                verticalAlignment = Alignment.Bottom
            ) {
                Icon(imageVector = Icons.Default.LocationOn,
                    contentDescription = null, tint = Color(0xFF2E3A59),
                    modifier = Modifier.size(24.dp)
                )
                Text(
                    text = "位置: ${vm.currentLocation.value}",
                    color = Color(0xFF201C1C),
                    style = TextStyle(
                        fontSize = 18.sp
                    )
                )
            }
            DropdownMenu(
                expanded = vm.expanded.value,
                onDismissRequest = {
                    vm.expanded.value= false
            },
                offset = DpOffset(x = 20.dp, y = 4.dp),
                ) {
                vm.otherLocation.map {
                    DropdownMenuItem(onClick = {
                        vm.otherLocation.add(vm.currentLocation.value)
                        vm.currentLocation.value = it
                        vm.otherLocation.remove(it)
                        vm.expanded.value= false
                    },
                    modifier = Modifier.widthIn(min = 140.dp)) {
                        Text(text = it,
                            style = TextStyle(
                            fontSize = 18.sp
                        ))
                    }
                }
            }
            Icon(
                imageVector = Icons.Default.Search,
                contentDescription = null,
                modifier = Modifier.clickable(
                    indication = null,
                    interactionSource = remember { MutableInteractionSource() }
                ){

                }.padding(end = 14.dp, top = 14.dp, start = 14.dp).size(24.dp)
            )
        }
    }
}


